<template>
  <!-- <el-config-provider :locale="configZh"> -->
    <el-config-provider :size="size" :z-index="zIndex">
     
    <div class="common-layout">
      <el-container>
        <el-aside width="auto">
          <el-scrollbar :style="'height:'+wh+'px'">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              :default-active="$route.path"
              text-color="#fff"
              router
            >
              <el-menu-item :index="'/index'">
                <el-icon>
                  <span class="iconfont icon-shouye1"></span>
                </el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-sub-menu v-for="item in pages" :key="item.name" :index="'/index/'+item.path">
                <template #title>
                  <el-icon>
                    <span :class="'iconfont ' +item.meta.icon"></span>
                  </el-icon>
                  <span>{{$t(item.meta.title)}}</span>
                </template>
                <el-menu-item-group v-for="ite in item.children" :key="ite.name">
                  <el-menu-item
                  v-show="ite.meta.title!='productAdd'&&ite.meta.title!='productEnit'"
                    :index="'/index/'+item.path+'/'+ite.path"
                    @click="menuClick(ite,'/index/'+item.path+'/'+ite.path)"
                  >{{$t(ite.meta.title)}}</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-header>
            <div class="bread">
              <img
                class="bresd-icon"
                @click="cols"
                :class="isCollapse?'action':''"
                src="@/assets/admin/bread.png"
                alt
              />
              <div class="bread-title">
                <breadcrumb />
              </div>
              <div class="bread-component">
                <div class="bread-component-con">
                  <span>
                    <colorStyle />
                  </span>
                  <span class="line">|</span>
                  <span>
                    <fontSize @fontsizeS="size=$event" />
                  </span>
                  <span class="line">|</span>
                  <span>
                    <fullScreen />
                  </span>
                  <span class="line">|</span>
                  <span>
                    <language/>
                  </span>
                  <span class="line">|</span>
                  <div class="bread-component-con-myself">
                    <myself />
                  </div>
                </div>
              </div>
            </div>
            <div>
              <tag />
            </div>
          </el-header>
          <el-main>
            <!-- 这里的wh还需要进行计算 -->
            <!-- <el-scrollbar :style="'height:'+wh+'px'"> -->
           <div>
             <router-view />
           </div>
            <!-- </el-scrollbar> -->
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider> 
  <!-- </el-config-provider> -->
</template>
<script>
// import { zhCn } from "element-plus/lib/locale/lang/zh-cn";
import breadcrumb from "../components/Breadcrumb.vue";
import colorStyle from "../components/ColorStyle.vue";
import fontSize from "../components/FontSize.vue";
import fullScreen from "../components/FullScreen.vue";
import myself from "@/components/Self.vue";
// import tag from "@/components/Tag.vue";
import tag from "@/components/Tags.vue";
import language from "../components/Language.vue";
import pages from "@/router/pages";
import { ElConfigProvider } from 'element-plus'
export default {
  components: {
    breadcrumb,
    colorStyle,
    fontSize,
    fullScreen,
    tag,
    myself,
    language,
    ElConfigProvider
  },
  // name: "ConfigProvider",
  data() {
    return {
        zIndex: 3000,
      size: 'small',
      wh: window.innerHeight,
      mainh: "",
      pages, //页面(在html动态加载)
      isCollapse: false,
    };
  },
  mounted() {
    // this.mainH()
  },
  methods: {
    // 折叠按钮
    cols() {
      this.isCollapse = !this.isCollapse;
    },
    menuClick(e, path) {
      // console.log(e,path);
      //   this.menutags(e)
      // this.$router.path=path
    },
  },
};
</script>
<style lang="less" scoped>
.el-header {
  height: 100px;
  border-bottom: #eaedef 1px solid;
    color: #333;
  padding: 0;
  .bread {
    height: 50px;
    border-bottom: #eaedef 1px solid;
    .bresd-icon {
      width: 20px;
      height: 20px;
      margin: 15px;
      float: left;
    }
    .action {
      transform: rotate(180deg);
    }
    .bread-title {
      margin-top: 20px;
      float: left;
    }
    .bread-component {
      height: 100%;
      height: 60px;
      float: right;
      margin-right: 20px;
      .bread-component-con {
        display: flex;
        white-space: nowrap;
        margin-top: 10px;
        .line {
          margin-top: 4px;
        }
        .bread-component-con-myself {
          margin-left: 15px;
        }
      }
    }
  }
}

.el-aside {
  color: #fff;
  background-color: #545c64;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    height: calc(100vh);
    min-width: 200px;
  }
  .menu-img {
    width: 50px;
  }
}
// 左侧菜单
.el-menu {
  border-right: none;

}
.el-main{
  // display: flex;
  z-index: 1000;
}
</style>